<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>02深度监听</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <ul>
            <li>姓名: {{name}}</li>
            <li>性别: {{gender}}</li>
            <li>年龄: 对外年龄{{age.foreignAge}},真实年龄{{age.realAge}}</li>
            <button @click="agesave">点击年龄+1</button>
            <button @click="agew">点击替换age对象</button>

        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                name:"李四",
                gender:"男",
                age:{
                    foreignAge:21,
                    realAge:23
                }
            },
            methods: {
                agesave(){
                    this.age.foreignAge +=1
                },
                agew(){
                    this.age= {foreignAge:100,realAge:200}
                }
            },
            // watch中deep用于开启深度监听 watch默认不监听内部值 而vue者监听内部值
             watch: {
                age:{
                    deep:true,
                    handler(){
                    
                    }
                }
            }
        })
    </script>
</body>

</html>